<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2024-03-27 16:13:14
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-05-11 17:54:34
 * @FilePath: \driving-training-admin\src\components\form\uploadFileGroup.vue
-->
<template>
    <div class="upload-file-group">
        <div v-if="data.imageCount" class="upload-file-group">
            <div v-if="data.videoCount" style="display: flex">
                <!-- 上传视频 -->
                <div v-for="(item, i) in data.videoCount" :key="i">
                    <UploadFileVue
                        :pass="true"
                        :visibleTag="data.tagVisible"
                        fileType="video"
                        :dirType="data.dirType"
                        :index="data.imageCount"
                        :data="videoData[i]"
                        :disabled="disabled"
                        :placeholder="data.placeholder"
                        :sizeRatio="data.sizeRatio"
                        :tag="data.tag"
                        @change="
                            (obj: any) => {
                                emits('change', { type: 'video', index: data.imageCount + i, obj: obj })
                            }
                        "
                    ></UploadFileVue>
                </div>
            </div>
            <!-- 已经上传图片 -->
            <div v-for="(item, i) in data.imageCount" :key="i">
                <UploadFileVue
                    :pass="true"
                    :visibleTag="data.tagVisible"
                    fileType="image"
                    :dirType="data.dirType"
                    :index="i"
                    :data="data.value[i]"
                    :disabled="disabled"
                    :placeholder="data.placeholder"
                    :sizeRatio="data.sizeRatio"
                    :tag="data.tag"
                    v-if="(uploadFileImageArray[i - 1] && i > 0) || i === 0"
                    @change="
                        (obj: any) => {
                            console.log('change', obj)
                            if (obj.list.length && obj.list[0].key) {
                                uploadFileImageArray[i] = obj
                                emits('change', { type: 'image', index: i, obj: obj })
                            }
                        }
                    "
                    @delete="
                        (res: any) => {
                            console.log(res.index)
                            emits('delete', { index: res.index })
                            // uploadFileImageArray.splice(res.index, 1)
                        }
                    "
                ></UploadFileVue>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import UploadFileVue from './uploadFile.vue'
const props = defineProps(['data', 'disabled'])
const emits = defineEmits(['change', 'delete'])
//保存上传的图片
const uploadFileImageArray: any[] = reactive(new Array(props.data.imageCount))
const videoData: any[] = reactive([])
watchEffect(() => {
    uploadFileImageArray.length = 0
    uploadFileImageArray.push(...new Array(props.data.imageCount))
    if (props.data.value.length) {
        videoData.length = 0
        console.log('updage', props.data.value)
        props.data.value.forEach((item: any, i: number) => {
            if (item.type === 'video') {
                videoData.push(item)
            } else {
                uploadFileImageArray[i] = item
            }
        })
    }
})
</script>

<style scoped lang="scss">
.upload-file-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
</style>
